<template>
  <div style="width: 100%" v-if="visible">
    <el-form ref="form" :model="form" :rules="rules" label-position="top" size="mini">
      <el-row>
        <el-col :span="24">
          <el-form-item label="主机" prop="machineIds">
            <el-select v-model="form.machineIds" placeholder="请选择机器" multiple clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in hostList" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="下载路径" prop="packagePath">
                <span slot="label">
                  下载路径
                  <el-tooltip placement="top">
                    <div slot="content">
                      下载路径示例：/home/admin/devops_platform
                    </div>
                    <i class="el-icon-question"/>
                  </el-tooltip>
                </span>
            <el-input v-model="form.packagePath" placeholder="请输入下载路径"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="部署脚本" prop="deployScript">
            <div style="width: 100%;overflow-x: scroll">
              <AceEditor
                width="100%"
                height="150px"
                :fontSize="14"
                :showPrintMargin="true"
                :showGutter="true"
                :highlightActiveLine="true"
                mode="sh"
                theme="monokai"
                :onChange="onChange"
                v-model="form.deployScript"
                name="editor"
                :editorProps="{$blockScrolling: true}"
              />
            </div>
          </el-form-item>
        </el-col>
<!--        <el-col :span="24">-->
<!--          <el-form-item label="通知" prop="notice">-->
<!--            <el-select v-model="form.notice" placeholder="请选择通知方式" clearable :style="{width: '100%'}">-->
<!--              <el-option v-for="(item, index) in noticeWays" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" style="width: 100%" type="primary" @click="submitForm">保 存</el-button>
    </div>
  </div>
</template>

<script>
// see https://www.npmjs.com/package/vue2-brace-editor
import {Ace as AceEditor, Split as SplitEditor} from 'vue2-brace-editor';

import 'brace/mode/sh';
import 'brace/theme/monokai';
import {searchHostList} from '@/lib/api-pipeline'
import {nodeInfo, addNodeInfo, updateInfo} from '@/lib/api-pipeline'
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element)

export default {
  name: "host-deploy",
  components: {
    AceEditor,
    // SplitEditor,
  },
  data() {
    return {
      id:0,
      visible: false,
      loading: false,
      nodeUuid: '',
      hostList: [],
      initDeployScript: '# 解压缩到指定目录中，再执行启动脚本（通常在代码中维护，如示deploy.sh \n\n # tar zxvf /home/admin/app/package.tgz -C /home/admin/app/\n # sh /home/admin/app/deploy.sh restart\n ',
      form: {
        deployScript: this.initDeployScript
      },
      radio: 1,
      noticeWays: [
        {value: 'DING_DING', label: '钉钉'},
        {value: 'EMAIL', label: '邮件'},
      ],
      rules: {
        machineIds: [{required: true, message: '主机不能为空', trigger: 'blur'}],
        jdk: [{required: true, message: 'jdk版本不能为空', trigger: 'blur'}],
        mvn: [{required: true, message: 'maven版本不能为空', trigger: 'blur'}],
        deployScript: [{required: true, message: '构建命令不能为空', trigger: 'blur'}],
        packagePath: [{required: true, message: '打包路径不能为空', trigger: 'blur'}]
      }
    }
  },
  methods: {
    init(nodeUuid) {
      //组件数据初始化，防止出现使用同一个组件的两个节点之间数据关联
      Object.assign(this.$data, this.$options.data())
      this.form = {
        deployScript: this.initDeployScript
      }
      this.nodeUuid = nodeUuid
      nodeInfo({'nodeUuid': nodeUuid}).then(response => {
        if (response.code === 200) {
          const data = response.data
          if (data) {
            this.form = JSON.parse(data.info)
            this.id = data.id
          }
        } else {
          this.msgError(response.msg)
        }
        this.visible = true
      })
      this.$api.getMachineList({
        page: 1,
        limit: 100
      }).then(({ data }) => {
        this.hostList = data.value.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      }).catch(() => {
        console.log('err')
      })
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 构建数据json
          let info = {
            'id': this.id,
            'nodeUuid': this.nodeUuid,
            'nodeName': '主机部署',
            'info': JSON.stringify(this.form)
          }
          if (this.id !== 0) {
            updateInfo({'pipelineNodeInfoDTO': info}).then(response => {
              if (response.code === 200) {
                this.msgSuccess('修改成功')
              } else {
                this.msgError(response.msg)
              }
            })
          } else {
              addNodeInfo({'pipelineNodeInfoDTO': info}).then(response => {
              if (response.code === 200) {
                this.id = response.data //更新新增节点id
                this.msgSuccess('新增成功')
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    onChange(data){
      this.form.deployScript = data
    }
  }
}
</script>

<style scoped>

</style>
